<template>
    <div class="chat-session">
      <div v-for="(message, index) in messages" :key="index" class="message" :class="{ user: message.sender === 'user', model: message.sender === 'model' }">
        <strong>{{ message.sender }}:</strong> {{ message.content }}
      </div>
      <div class="input-area">
        <textarea v-model="input" placeholder="输入消息..." @keydown.enter.prevent="handleSendMessage"></textarea>
        <button @click="handleSendMessage">发送</button>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { defineProps, defineEmits, ref } from 'vue';
  
  const props = defineProps<{
    messages: { sender: string; content: string }[];
    model: string;
  }>();
  
  const emit = defineEmits<{
    (e: 'send-message', value: string): void;
  }>();
  
  const input = ref('');
  
  const handleSendMessage = () => {
    if (input.value.trim()) {
      emit('send-message', input.value);
      input.value = '';
    }
  };
  </script>
  
  <style scoped>
  .chat-session {
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
    overflow-y: auto;
  }
  
  .message {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    max-width: 70%;
  }
  
  .user {
    background-color: #dcfce7;
    align-self: flex-end;
  }
  
  .model {
    background-color: #fde68a;
    align-self: flex-start;
  }
  
  .input-area {
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }
  
  textarea {
    flex: 1;
    resize: vertical;
    min-height: 50px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  button {
    padding: 10px 20px;
    background-color: #0dcaf0;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0badd5;
  }
  </style>